<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Playback - Free Bootstrap 4 App Landing Page Template</title>
        <meta name="description" content="Playback is a beautiful Bootstrap 4 template for mobile apps landing pages." /> 

        <!--Inter UI font-->
        <link href="https://rsms.me/inter/inter-ui.css" rel="stylesheet">

        <!--vendors styles-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">

        <!-- Bootstrap CSS / Color Scheme -->
        <link rel="stylesheet" href="css/default.css" id="theme-color">
    </head>
    <body>

        <!--main columns-->
        <section class="p-0">
            <div class="container-fluid">
                <div class="row vh-md-100">
                    <div class="col-md-6 col-md-fixed my-auto col-mockup">
                        <ul class="list-unstyled slick-mockups">
                            <li><img src="img/mockup-1.png" alt="Mockup 1" class="img-fluid d-block mx-auto"/></li>
                            <li><img src="img/mockup-2.png" alt="Mockup 2" class="img-fluid d-block mx-auto"/></li>
                            <li><img src="img/mockup-3.png" alt="Mockup 3" class="img-fluid d-block mx-auto"/></li>
                        </ul>
                    </div>
                    <div class="col-md-6 ml-auto px-0">

                        <!--hero header-->
                        <section class="mt-6" id="home">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-11 mx-auto text-center">
                                        <h1>溯源</h1>
                                        <div class="divider mx-auto bg-dark"></div>
                                        <p class="lead text-muted mb-5">一款根据图片查找原图或者出处或者类似图片的App.</p>
                                        <div class="my-5">
                                            <a href="#" hidden><img src="img/apple_store.png" class="img-store"/> </a>
                                            <a href="#" class="ml-2"><img src="img/google-play.png" class="img-store"/></a>
                                        </div>
                                        <div class="slick-reviews small-xl mt-4 px-md-5">
                                            <div class="review">
                                                <p class="text-muted">很好用,再也不用担心找不到出处了.</p>
                                                <p class="text-muted">
                                                    <span>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                    </span>
                                                    <span>XXX</span>
                                                </p>
                                            </div>
                                            <div class="review">
                                                <p class="text-muted">有了它表情包也多了起来.</p>
                                                <p class="text-muted">
                                                    <span>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star-half-empty"></em>
                                                    </span>
                                                    <span>Rosita Smith</span>
                                                </p>
                                            </div>
                                            <div class="review">
                                                <p class="text-muted">搜图神器,没有找不到的.</p>
                                                <p class="text-muted">
                                                    <span>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star"></em>
                                                        <em class="fa fa-star-o"></em>
                                                    </span>
                                                    <span>Kathrine Jones</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- features section -->
                        <section class="mt-6" id="features">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-11 mx-auto">
                                        <h3 class="text-center">使用方式及介绍.</h3>
                                        <div class="divider divider-sm mx-auto bg-dark"></div>
                                        <div class="row mt-5">
                                            <div class="col-sm-6 mb-4">
                                                <h6>搜索方式一 <span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">已经具有网络图片url,直接输入,然后搜索</p>
                                            </div>
                                            <div class="col-sm-6 mb-4">
                                                <h6>搜索方式二 <span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">上传本地图片,等待上传完成点击搜索</p>
                                            </div>
                                            <div class="col-sm-6 mb-4">
                                                <h6>查看出处 <span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">在搜索结果界面,长按每一个图片即可查看图片来源网站</p>
                                            </div>
                                            <div class="col-sm-6 mb-4">
                                                <h6>溯源以及找类似 <span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">搜索结果界面切换顶部标签即可</p>
                                            </div>
                                            <div class="col-sm-6 mb-4">
                                                <h6  class="d-flex flex-row align-items-center">图片下载 <span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">搜索结果界面点击图片即可浏览大图,长按大图即可弹出更多操作界面</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- privacy section -->
                        <section class="mt-6" id="privacy">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-11 mx-auto">
                                        <h3 class="text-center">隐私政策.</h3>
                                        <div class="divider divider-sm mx-auto bg-dark"></div>
                                        <div class="row mt-5">
                                            <div class="col-sm-6 mb-11">
                                                <h6 class="d-flex flex-row align-items-center">隐私协议<span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">此软件不存储任何用户隐私</p>
                                            </div>
                                            <div class="col-sm-6 mb-11">
                                                <h6 class="d-flex flex-row align-items-center">免责声明<span class="badge badge-primary badge-feature ml-1 mt-1">new</span></h6>
                                                <p class="text-muted">此软件使用完全免费,请勿用于从事非法事项,如果用户用于从事非法事项,责任自行承担.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!--news section-->
                        <section class="mt-6" id="news">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-11 mx-auto">
                                        <h3 class="text-center">Latest news from our blog.</h3>
                                        <div class="divider divider-sm mx-auto bg-dark"></div>
                                        <div class="row mt-5">
                                            <div class="col-md-6 mb-5">
                                                <div class="card">
                                                    <a href="#">
                                                        <img class="card-img-top rounded" src="img/blog-1.jpg" alt="Blog 1">
                                                    </a>
                                                    <div class="card-body px-0">
                                                        <a href="#">
                                                            <h6 class="card-title mb-2">Playback Business is launched</h6>
                                                            <p class="text-muted">January 27, 2018</p>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-5">
                                                <div class="card">
                                                    <a href="#">
                                                        <img class="card-img-top rounded" src="img/blog-2.jpg" alt="Blog 2">
                                                    </a>
                                                    <div class="card-body px-0">
                                                        <a href="#">
                                                            <h6 class="card-title mb-2">Introducing 24/7 data sync for premium users</h6>
                                                            <p class="text-muted">December 16, 2017</p>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                
                            </div>
                        </section>

                        <!--contact-->
                        <section class="my-6" id="support">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-11 mx-auto text-center">
                                        <p class="text-muted text-uppercase">Stay in touch</p>
                                        <ul class="list-inline social social-white-alt social-rounded social-sm my-3">
                                            <li class="list-inline-item">
                                                <a href=""><i class="fa fa-facebook"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href=""><i class="fa fa-twitter"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href=""><i class="fa fa-google-plus"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href=""><i class="fa fa-dribbble"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href=""><i class="fa fa-envelope"></i></a>
                                            </li>
                                        </ul>
                                        <div class="text-muted small-xl">
                                            &copy; 2020. All Rights Reserved. </a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!--footer--> 
                        <footer class="fixed-bottom">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-6 ml-auto text-center bg-footer px-0">
                                        <ul class="list-inline mt-3 mb-2 small-xl">
                                            <li class="list-inline-item"><a class="page-scroll" href="#home">Home</a></li>
                                            <li class="list-inline-item"><a class="page-scroll" href="#features">How it works</a></li>
                                            <li class="list-inline-item"><a class="page-scroll" href="#news">News</a></li>
                                            <li class="list-inline-item"><a class="page-scroll" href="#support">Support</a></li>
                                            <li class="list-inline-item"><a href="#privacy">Privacy</a></li>
                                            <li class="list-inline-item"><a href="#">Terms</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </section>

        <!--scroll to top-->
        <div class="scroll-top">
            <i class="fa fa-angle-up" aria-hidden="true"></i>
        </div>

        <!-- theme switcher (FOR DEMO ONLY - REMOVE FROM PRODUCTION)-->
        <div class="switcher-wrap">
            <div class="switcher-trigger">
                <span class="fa fa-gear"></span>
            </div>
            <div class="color-switcher">
                <h6>Color Switcher</h6>
                <ul class="mt-3 clearfix">
                    <li class="bg-pink active" data-color="default" title="Default Pink"></li>
                    <li class="bg-teal" data-color="teal" title="Teal"></li>
                    <li class="bg-blue" data-color="blue" title="Blue"></li>
                    <li class="bg-red" data-color="red" title="Red"></li>
                    <li class="bg-indigo" data-color="indigo" title="Indigo"></li>
                    <li class="bg-orange" data-color="orange" title="Orange"></li>
                    <li class="bg-green" data-color="green" title="Green"></li>
                    <li class="bg-black" data-color="black" title="Black"></li>
                    <li class="bg-cyan" data-color="cyan" title="Cyan"></li>
                    <li class="bg-purple" data-color="purple" title="Purple"></li>
                </ul>
                <p>These are just demo colors. You can <b>easily</b> create your own color scheme.</p>
            </div>
        </div>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.5.0/feather.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>